<template>
    <div id="inspection-item">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            class="set-s"
            :close-on-click-modal="false" 
            :fullscreen="true"
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <div class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
                <el-row class="w-h-100" :gutter="10">
                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="w-h-100">
                        <div style="box-sizing: border-box;" class="flex-1 pos-r w-h-100">
                            <div class="pos-a w-h-100" style="box-sizing: border-box;">
                                <el-card class="box-card w-h-100" shadow="never" :body-style="{ paddingBottom: '0', paddingTop: '0' }">
                                    <div style="" class="w-h-100 ver-flex">
                                        <div class="flex-1 pos-r">
                                            <div class="pos-a w-h-100">
                                                <div class="w-h-100" style="border: 1px solid rgba(255,255,255,.1)">
                                                    <ul>
                                                        <li class="area-l" v-for="item in docInfo" :key="item.id" @click="liClick(item)" :class="{ 'active': selectedItem === item.id }">
                                                            <span>{{item.analysisUnit.v_Name}}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20" class="w-h-100">
                        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box;width: 82.4vw;overflow: hidden;">
                            <!-- 新增风险管控清单 -->
                            <div style="box-sizing: border-box;">
                                <el-card shadow="never" :body-style="{ paddingBottom: '0', paddingTop: '0' }">
                                    <el-form class="box-f" ref="queryForm" :inline="true">
                                        <el-form-item >
                                            <!-- <el-button icon="ele-Search" type="primary"> 查询 </el-button>
                                            <el-button icon="ele-Refresh"> 重置 </el-button> -->
                                            <el-button @click="docClick" icon="ele-Plus" type="primary"> 新增风险项目 </el-button>
                                        </el-form-item>
                                    </el-form>
                                    <el-table :data="issueList" class="w-h-100 issue-tab" style="width: 100%" border v-loading="issueLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="风险事件"  align="center" >
                                            <template #default="scope">
                                                <span v-if="scope.row.v_EventName">{{scope.row.v_EventName}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="辨析范围分类"  align="center" >
                                            <template #default="scope">
                                                <span>{{scope.row.v_Discriminate}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="危害因素"  align="center" >
                                            <template #default="scope">
                                                <span>{{scope.row.v_HazardousFactors}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="管控措施分类"  align="center" >
                                            <template #default="scope">
                                                <span v-if="scope.row.v_DCMeasureClassName">{{scope.row.v_DCMeasureClassName}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="管控措施"  align="center" >
                                            <template #default="scope">
                                                <span>{{scope.row.v_DCMeasure}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患排查内容"  align="center" >
                                            <template #default="scope">
                                                <span>{{scope.row.v_CheckContent}}</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column width="180" label="操作" align="center" fixed="right">
                                            <template #default="scope">
                                                <div class="operate-s">
                                                    <el-button @click="deleteHandle(scope.row)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-card>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <el-button @click="cancelUseClick">关闭</el-button>
            </template>
        </el-dialog>
        <AddProject
            :echoInfo="echoInfo"
            :xjId="xjId"
            :repairInfo="repairProInfo"
            :isUseDialog="isProDialog"
            @cancelProClick="cancelProClick"
            @controlProClick="controlProClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRefs , watch } from 'vue';
import { ElButton, ElDialog , ElMessageBox , ElMessage } from 'element-plus';
import { SMSIPPathContentList , SMSIPPathContentDelete } from '/@/api/centerControl/sms';
import AddProject from './add-project.vue';
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    l_SMSDCListIds: Number, // 风险管控分析单元Id
    v_SMSDCListName: String, // 风险管控分析单元名称
}
export default defineComponent( {
    name: 'inspection-item',
    components: { AddProject },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const analyOption = ref();
        const tabList = ref();
        const selectedItem = ref();
        const docInfo = ref();
        let gkId: any;
        const issueList = ref();
        const issueLoading = ref(false);
        const repairProInfo = ref();
        const isProDialog = ref(false);
        const xjId = ref();
        let echoArr: any = [];
        const echoInfo = ref();

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            docInfo.value = [];
            issueList.value = [];
            ctx.emit('cancelItemClick');
        }

        /*** getData 获取数据 */
        const getData = async(zId: Number, lId: Number) => {
            // lId：风险分析单元id  zId：巡检路线id
            echoArr = [];
            let res:any = await SMSIPPathContentList({l_IPPathId: zId , l_AnalysisUnitId: lId});
            if(res.success) {
                if(res.data.length !== 0){
                    let setArr: any = [];
                    let issueArr: any = [];
                    res.data.map((item: any) => {
                        setArr.push(item.l_SMSDCListId);
                        if(item.smsdcList) issueArr.push(item.smsdcList);
                    });
                    issueList.value = issueArr;
                    echoArr = setArr;
                }
            }
            issueLoading.value = false;
        }

        /*** liClick 风险分析单元点击事件 */
        const liClick = (val: any) => {
            issueLoading.value = true;
            selectedItem.value = val.id;
            gkId = val.analysisUnit.id;
            issueList.value = [];
            getData(val.l_IPPathId , val.analysisUnit.id );
        }

        /*** docClick 新增风险管控清单 */
        const docClick = () => {
            repairProInfo.value = gkId;
            xjId.value = JSON.parse(props.repairInfo).info.id;
            echoInfo.value = JSON.stringify(echoArr);
            isProDialog.value = true;
        }

        /*** deleteHandle 删除点击事件 */
        const deleteHandle = (val: any) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val.id}
                try {
                    let res:any = await SMSIPPathContentDelete(param);
                    if(res.success) getData(JSON.parse(props.repairInfo).info.id , gkId);
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                issueLoading.value = true;
                let item = JSON.parse(props.repairInfo).res;
                titleCon.value = '新增巡检项目';
                docInfo.value = item;
                selectedItem.value = item[0].id;
                gkId = item[0].analysisUnit.id;
                getData(item[0].l_IPPathId , item[0].analysisUnit.id);
            }
        })
        /*** cancelProClick 巡检项目取消事件 */
        const cancelProClick = () => {
            isProDialog.value = false;
        }
        /*** controlProClick 巡检项目提交事件 */
        const controlProClick = () => {
            getData(JSON.parse(props.repairInfo).info.id , gkId);
            isProDialog.value = false;
        }

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            cancelUseClick,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            analyOption,
            tabList,
            selectedItem,
            liClick,
            docInfo,
            docClick,
            issueList,
            issueLoading,
            deleteHandle,
            repairProInfo,
            isProDialog,
            cancelProClick,
            controlProClick,
            xjId,
            echoInfo,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
    height: calc(100vh - 110px);
    max-height: none !important;
    overflow-y: hidden;
}
.issue-tab{
    :deep(.el-scrollbar__wrap){
        height: calc(100vh - 240px);
        overflow-y: auto;
    }
}
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
ul {
    list-style: none;
    // padding: 10px 0;
    li {
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        // text-align: center;
        padding: 20px 0 20px 10px;
    }
}
.active{
    background: rgba(0,0,0,.2)!important;
}
.area-l:hover{
    background: rgba(0,0,0,.2)!important;
}
</style>